<template>
  <div class="main">
    <el-container style="height:100vh">
      <asidePage></asidePage>
      <el-container class="content">
        <headerPage></headerPage>
        <el-main class="main-content">
          <el-card>
            <router-view/>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import asidePage from './AsidePage.vue'
import headerPage from './HeaderPage.vue'
import { mapState} from "vuex";

export default {
  name: 'main-page',
  props: {},
  components: {
    asidePage,
    headerPage
  },
  data: function () {
    return {}
  },
  created() {


  },
  computed: {
    ...mapState('headerRecord',['leftTitle',]),
    ...mapState(['menuArr',]),

  },
  watch: {
    $route:{//$route发生改变
      handler(newIsCollapse) {
        console.log('路由发生了改变',newIsCollapse)
        //调用子模块方法，并传入参数
        this.$store.commit('headerRecord/changeState',newIsCollapse.meta)

        //添加传入参数
        this.$store.commit('changeMenuArr',newIsCollapse)

      },
      immediate:true,//初始化的时候触发handler

    }


  },
  methods: {}
}
</script>

<style scoped lang="less">
.main {
  .content {
    display: flex;
    flex-flow: column;

    .main-content {
      background-color: #f1f4f5;
    }
  }


}
</style>

